<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">搜索:目的地/酒店/景点/航班号</div>
        <a href="#" class="user">登 录</a>
    </div>

    <!-- 主导航栏 -->
    <nav class="nav1">
        <div class="nav-common">
            <div class="nav-items" 
            style="background-image: linear-gradient(180deg,#fa5956,#fb8650);">
                <a href="#">
                    <span 
                    style="background: url(img/nav-1-1.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>酒店</p>
                </a>
            </div>
            <div class="nav-items" 
            style="background-image: linear-gradient(180deg,#3c83fa,#50b2fa);">
                <a href="#">
                    <span 
                    style="background: url(img/nav-1-2.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>机票</p>
                </a>
            </div>
            <div class="nav-items" 
            style="background-image: linear-gradient(0deg,#66a4ff,#5e80ff);">
                <a href="#">
                    <span 
                    style="background: url(img/nav-1-3.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>火车票</p>
                </a>
            </div>
            <div class="nav-items" 
            style="background-image: linear-gradient(180deg,#2fc3b6,#52d9b3);">
                <a href="#">
                    <span 
                    style="background: url(img/nav-1-4.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>旅游</p>
                </a>
            </div>
            <div class="nav-items" 
            style="background-image: linear-gradient(0deg,#ffa846,#ff8939 99%);">
                <a href="#">
                    <span 
                    style="background: url(img/nav-1-5.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>攻略/景点</p>
                </a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">
                    <span 
                    style="background: url(img/nav-2-1.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>民宿/客栈</p>
                </a>
            </div>
            <div class="nav-items">
                <a href="#">
                    <span 
                    style="background: url(img/nav-2-2.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>机+酒</p>
                </a>
            </div>
            <div class="nav-items">
                <a href="#">
                    <span 
                    style="background: url(img/nav-2-3.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>汽车/船票</p>
                </a>
            </div>
            <div class="nav-items">
                <a href="#">
                    <span 
                    style="background: url(img/nav-2-4.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>门票/活动</p>
                </a>
            </div>
            <div class="nav-items">
                <a href="#">
                    <span 
                    style="background: url(img/nav-2-5.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>美食</p>
                </a>
            </div>
        </div>
        <div class="nav-common">
            <div class="nav-items">
                <a href="#">
                    <span 
                    style="background: url(img/nav-3-1.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>特价/爆款</p>
                </a>
            </div>
            <div class="nav-items">
                <a href="#">
                    <span 
                    style="background: url(img/nav-3-2.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>接送机/包车</p>
                </a>
            </div>
            <div class="nav-items">
                <a href="#">
                    <span 
                    style="background: url(img/nav-3-3.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>租车</p>
                </a>
            </div>
            <div class="nav-items">
                <a href="#">
                    <span 
                    style="background: url(img/nav-3-4.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>周边游</p>
                </a>
            </div>
            <div class="nav-items">
                <a href="#">
                    <span 
                    style="background: url(img/nav-3-5.png) no-repeat;
                    background-size: 28px 28px;">
                    </span>
                    <p>购物/免税</p>
                </a>
            </div>
        </div>
    </nav>

    <!-- 副导航栏 -->
    <nav class="nav2">
        <div class="nav-row">
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-1-1.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>向导/包车</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-1-2.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>保险</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-1-3.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>微领队</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-1-4.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>一日游</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-1-5.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>定制游</p>
                </a>
            </div>
        </div>
        <div class="nav-row">
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-2-1.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>游轮</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-2-2.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>外币兑换</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-2-3.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>签证</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-2-4.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>WIFI电话卡</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-2-5.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>行李寄送</p>
                </a>
            </div>
        </div>
        <div class="nav-row">
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-3-1.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>旅拍·跟拍</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-3-2.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>航班助手</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-3-3.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>拿去花</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-3-4.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>礼品卡</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-3-5.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>信用卡</p>
                </a>
            </div>
        </div>
        <div class="nav-row">
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-4-1.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>会员/签到</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-4-2.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>超级会员</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-4-3.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>会员商城</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-4-4.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>携程小诗机</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-4-5.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>紧急救援</p>
                </a>
            </div>
        </div>
        <div class="nav-row">
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-5-1.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>加盟合作</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-5-2.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>会展旅游</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-5-3.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>企业差旅</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-5-4.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>核酸检测</p>
                </a>
            </div>
            <div class="nav-r">
                <a href="#">
                    <span 
                    style="background: url(img/nav2-5-5.png) no-repeat;
                    background-size: 28px 28px;"></span>
                    <p>Trip.com</p>
                </a>
            </div>
        </div>
    </nav>

    <!-- 直播和排行榜 -->
    <div class="box">
        <div class="zhibo" style="margin-right: 10px;">
            <span>
                <div></div>
                <div></div>
                <div>特价好货直播中</div>
            </span>
            <div></div>
            <p>599</p>
        </div>
        <div class="jx">
            <span>
                <div></div>
                <div></div>
                <div>权威排行榜</div>
            </span>
            <div>
                <div>
                    <span></span>
                    <p style="font-size: 12px;">上海年度十佳本帮菜</p>
                </div>
                <div>
                    <span></span>
                    <p style="font-size: 12px;">上海世界杯小酒馆</p>
                </div>
            </div>
        </div>
    </div>

    <!-- banner -->
    <div class="banner">
    </div>

    <!-- 底部 -->
    <footer>
        <div class="f-t">
            <div>
                <a href="#">
                    <span>电话预定</span>
                </a>
            </div>
            <div>
                <a href="#">
                    <span>下载携程</span>
                </a>
            </div>
            
        </div>
        <div class="f-c">
            <div>
                <p>网站地图</p>
            </div>
            <div>
                <p>电脑版</p>
            </div>
        </div>
        <div class="f-b">
            <div><p>2022携程旅行</p></div>
            <div><p>沪ICP备08023580号</p></div>
        </div>
    </footer>

    <!-- 每日签到 -->
    <div class="mrqd">
        <a href="#">
            
        </a>
    </div>

    <!-- 切换栏 -->
    <div class="bottom">
        <a class="b-item" href="#">
            <span></span>
            <p>首页</p>
        </a>
        <a class="b-item" href="#">
            <span></span>
            <p>社区</p>
        </a>
        <a class="b-item" href="#">
            <span></span>
            <p>消息</p>
        </a>
        <a class="b-item" href="#">
            <span></span>
            <p>我的</p>
        </a>
    </div>
    
</body> 
</html> 